<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>滑坡泥石流防护知识</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-yellow-50 min-h-screen">
    <!-- 预警条 -->
    <div class="bg-gradient-to-r from-yellow-700 to-yellow-500 text-white text-center py-2">
        <i class="fas fa-mountain mr-2"></i>近期强降雨，注意防范滑坡泥石流！
    </div>
    <!-- 标题区 -->
    <div class="max-w-4xl mx-auto mt-8">
        <h1 class="text-4xl font-bold text-yellow-800 mb-2 flex items-center"><i class="fas fa-mountain mr-3"></i>滑坡泥石流防护知识</h1>
        <p class="text-yellow-700 text-lg mb-6">了解地质灾害风险，掌握自救互救方法</p>
        <!-- 卖点卡片区 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
            <div class="bg-white rounded-xl shadow p-5 flex flex-col items-center">
                <i class="fas fa-water text-3xl text-yellow-700 mb-2"></i>
                <div class="font-bold text-lg">远离危险地带</div>
                <div class="text-sm text-gray-500">暴雨后勿靠近山体、河谷</div>
            </div>
            <div class="bg-white rounded-xl shadow p-5 flex flex-col items-center">
                <i class="fas fa-sign text-3xl text-yellow-700 mb-2"></i>
                <div class="font-bold text-lg">关注预警标志</div>
                <div class="text-sm text-gray-500">发现裂缝、异响及时撤离</div>
            </div>
            <div class="bg-white rounded-xl shadow p-5 flex flex-col items-center">
                <i class="fas fa-people-carry text-3xl text-yellow-700 mb-2"></i>
                <div class="font-bold text-lg">互助自救</div>
                <div class="text-sm text-gray-500">协助老人儿童安全转移</div>
            </div>
        </div>
        <!-- 预防措施 -->
        <div class="bg-yellow-100 rounded-xl p-6 mb-6">
            <h2 class="text-2xl font-semibold text-yellow-800 mb-2"><i class="fas fa-shield-alt mr-2"></i>滑坡泥石流预防措施</h2>
            <ul class="list-disc pl-6 text-yellow-900 space-y-1">
                <li>暴雨期间远离山体、河谷等危险区域。</li>
                <li>关注气象和地质灾害预警信息。</li>
                <li>发现地面裂缝、异响、涌水等异常及时撤离。</li>
                <li>不在危险地带搭建房屋或临时设施。</li>
                <li>参与社区防灾演练，提升自救能力。</li>
            </ul>
        </div>
        <!-- 应急处理 -->
        <div class="bg-white rounded-xl shadow p-6 mb-6">
            <h2 class="text-2xl font-semibold text-yellow-800 mb-2"><i class="fas fa-running mr-2"></i>滑坡泥石流应急处理</h2>
            <ul class="list-decimal pl-6 text-yellow-900 space-y-1">
                <li>听从指挥，迅速撤离危险区域。</li>
                <li>撤离时选择高处安全路线。</li>
                <li>如被困，保持冷静，设法发出求救信号。</li>
                <li>协助老人、儿童、行动不便者优先转移。</li>
                <li>灾害过后，勿贸然返回危险区。</li>
            </ul>
        </div>
        <!-- 紧急电话 -->
        <div class="bg-yellow-200 rounded-xl p-4 mb-6 flex items-center">
            <i class="fas fa-phone-alt text-2xl text-yellow-700 mr-4"></i>
            <span class="text-lg font-bold text-yellow-900">应急电话：110 / 119 / 120</span>
        </div>
        <!-- 家庭急救包 -->
        <div class="bg-white rounded-xl shadow p-6 mb-10">
            <h2 class="text-2xl font-semibold text-yellow-800 mb-2"><i class="fas fa-briefcase-medical mr-2"></i>家庭急救包建议</h2>
            <ul class="list-disc pl-6 text-yellow-900 space-y-1">
                <li>手电筒、口哨</li>
                <li>饮用水、应急食品</li>
                <li>常用药品、绷带</li>
                <li>收音机、手机充电宝</li>
                <li>雨衣、防滑鞋</li>
            </ul>
        </div>
    </div>
</body>
</html> 